// 轮播图
{
    // 声明轮播图数组
    const swiperImgList = [
        {
            path: './images/swiper/swiper-1.jpg',
            url: 'https://coding.imooc.com/class/474.html',
            bg: './images/swiper/bj-0.jpg'
        },
        {
            path: './images/swiper/swiper-2.jpg',
            url: 'https://coding.imooc.com/class/490.html',
            bg: './images/swiper/bj-1.jpg'
        },
        {
            path: './images/swiper/swiper-3.jpg',
            url: 'https://coding.imooc.com/class/482.html',
            bg: './images/swiper/bj-2.jpg'
        },
        {
            path: './images/swiper/swiper-4.jpg',
            url: 'https://coding.imooc.com/class/494.html',
            bg: './images/swiper/bj-3.jpg'
        }
    ];

    // 获取左右侧切换按钮
    const rightArrow = document.querySelector('.arrow-r');
    const leftArrow = document.querySelector('.arrow-l');
    // 获取a标签对象
    const swiperA = document.querySelector('.swiper a');
    // 获取最外层通栏的div对象
    const banner = document.querySelector('#banner');
    // 获取所有的切换圆点
    const lis = document.querySelectorAll('.circle-list li');
    const ul = document.querySelector('.circle-list');
    // 定义自动轮播的计时器
    let timer = null;

    // 用来控制数组索引的
    let i = 0;

    // 封装切换图片函数
    function changeImg (index) {
        swiperA.style.backgroundImage = `url(${swiperImgList[index].path})`;
        swiperA.href = swiperImgList[index].url;
        banner.style.backgroundImage = `url(${swiperImgList[index].bg})`;
        currentCircle(index)
    }

    // 初始化轮播图（显示第一张轮播图、背景图、链接地址）
    changeImg(i);

    // 设置是否允许点击事件执行的标志位
    // true 则允许执行点击事件， false则不允许执行
    let flag = true;

    rightArrow.onclick = function () {
        if (flag == false) {
            return;
        }
        flag = false;
        i = ++i == 4 ? 0 : i;
        changeImg(i);
        setTimeout(() => {
            flag = true;
        }, 1000)
    }

    leftArrow.onclick = function () {
        if (flag == false) {
            return;
        }
        flag = false;
        i = --i == -1 ? 3 : i;
        changeImg(i);
        setTimeout(() => {
            flag = true;
        }, 1000)
    }

    // 选中圆点函数封装
    function currentCircle (index) {
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
            lis[index].className = 'current';
        }
    }
    
    // 循环注册圆点点击事件
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            if (flag == false) {
                return;
            }
            flag = false;
            changeImg(i);
            setTimeout(() => {
                flag = true;
            }, 1000)
        }
    }

    // 自动轮播
    // function autoRun () {
        
    // }
    
    // autoRun();

    timer = setInterval(() => {
        i = ++i == 4 ? 0 : i;
        changeImg(i);
    }, 3000);

    swiperA.onmouseenter = function () {
        clearInterval(timer);
    }
    swiperA.onmouseleave = function () {
        timer = setInterval(() => {
            i = ++i == 4 ? 0 : i;
            changeImg(i);
        }, 3000);
    }
    
    leftArrow.onmouseenter = function () {
        clearInterval(timer);
    }
    rightArrow.onmouseenter = function () {
        clearInterval(timer);
    }
    ul.onmouseenter = function () {
        clearInterval(timer);
    }
}

// 倒计时
{
    //1. 获取结束时间点的时间戳
    let endDate = new Date('2021-06-23 12:30:00');
    endDate = parseInt(endDate.getTime() / 1000);

    let timer = null;

    // 获取时分秒的标签对象
    const hourDom = document.getElementById('hour');
    const minDom = document.getElementById('min');
    const secDom = document.getElementById('sec');
    
    function countDown () {
        //2. 获取当前时间点的时间戳
        let nowDate = new Date();
        nowDate = parseInt(nowDate.getTime() / 1000);

        //3. 计算剩余的总秒数
        let seconds = endDate - nowDate;
        if (seconds >= 0) {
            let hours = parseInt(seconds / 3600);
            hours = hours > 9 ? hours : '0' + hours
            let mins = parseInt(seconds % 3600 / 60);
            mins = mins > 9 ? mins : '0' + mins;
            let secs = seconds % 3600 % 60;
            secs = secs > 9 ? secs : '0' + secs;

            //console.log(hours, mins, secs);
            hourDom.innerText = hours;
            minDom.innerText = mins;
            secDom.innerText = secs;
        } else {
            clearInterval(timer);
            document.querySelector('.countdown p').innerText = '拼团已结束';
            hourDom.innerText = '00';
            minDom.innerText = '00';
            secDom.innerText = '00';
        }
        
    }
    
    countDown();

    timer = setInterval ( () => {
        countDown();
    }, 1000)
    
}

// 滚动课程
{
    const ul = document.querySelector('.ms-list ul');

    let timer = null;

    let leftPX = 0;

    timer = setInterval(() => {
        leftPX = --leftPX == -1920 ? 0 : leftPX;
        ul.style.left = leftPX + 'px';
    }, 10);

    ul.onmouseenter = function () {
        clearInterval(timer);
    }
    ul.onmouseleave = function () {
        timer = setInterval(() => {
            leftPX = --leftPX == -1920 ? 0 : leftPX;
            ul.style.left = leftPX + 'px';
        }, 10);
    }
}

// 课程切换
{
    // 1. 获取所有的a标签（tab栏）
    const tabs = document.querySelectorAll('.title-pic a');
    const uls = document.querySelectorAll('.course ul');

    // 2. 循环为所有的tab栏绑定点击事件
    for (let i = 0; i < tabs.length; i++) {
        tabs[i].onclick = function () {
            // 清除所有a标签和ul标签的样式
            for (let j = 0; j < tabs.length; j++) {
                tabs[j].className = '';
                uls[j].className = '';
            }
            tabs[i].className = 'active';
            uls[i].className = 'current';
        }
    }
}
